<template>
  <div>
    <vxe-toolbar>
      <template #buttons>
        <a-input-group compact>
          <a-select
            v-model:value="ApiData.type"
            style="width: 150px"
            @change="handleChange"
          >
            <a-select-option value="0">全部</a-select-option>
            <a-select-option value="1">原材料名称查询</a-select-option>
            <a-select-option value="2">仓库查询</a-select-option>
          </a-select>
          <!-- 原材料名称查询 -->
          <a-input-search
            v-if="ApiData.type == '1'"
            v-model:value="ApiData.productName"
            placeholder="请输入查询内容"
            style="width: 200px"
            @search="onSearch"
          />

          <!-- 仓库查询 -->

          <a-radio-group
            v-if="ApiData.type == '2'"
            name="radioGroup"
            :default-value="1"
            style="margin-left: 10px"
            @change="radioChange"
            v-model:value="ApiData.storeProductId"
          >
            <a-radio value="0">全部</a-radio>

            <a-radio
              :value="item.id"
              v-for="(item, index) in storehouseList"
              :key="index"
            >
              {{ item.srName }}
            </a-radio>
          </a-radio-group>
        </a-input-group>
      </template>
    </vxe-toolbar>

    <vxe-table
      border
      show-header-overflow
      show-overflow
      highlight-hover-row
      align="center"
      :data="tableData"
    >
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column
        field="product.productName"
        title="原材料名称"
        min-width="120"
      ></vxe-table-column>
      <vxe-table-column title="原材料图片" min-width="100">
        <template #default="{ row }">
          <a-avatar :src="row.product.productImage" />
        </template>
      </vxe-table-column>
      <vxe-table-column
        field="productNum"
        title="原材料库存"
        min-width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="storehouse.srName"
        title="来自仓库"
        min-width="100"
      ></vxe-table-column>
      <vxe-table-column title="库存状态（低于10）" min-width="200">
        <template #default="{ row }">
          <a-tag color="#f50" v-if="row.productNum < 10">库存预警</a-tag>
          <a-tag color="#87d068" v-else>库存充足</a-tag>
        </template>
      </vxe-table-column>
      <vxe-table-column title="创建时间" min-width="200">
        <template #default="{ row }">
          {{ tenBitTimestamp(row.updateTime) }}
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" width="150">
        <template #default="{ row }">
          <!-- 退货 -->
          <a-button
            type="primary"
            shape="circle"
            ghost
            @click="returnGoods(row)"
            style="margin-right: 10px"
          >
            <i class="iconfont icon-tuihuo"></i>
          </a-button>

          <!-- 调剂 -->
          <a-button type="danger" shape="circle" ghost @click="Inventory(row)" v-if="role == 'ROLE_SUP_ADMIN'" >
            <i class="iconfont icon-tiaobotiaoji"></i>
          </a-button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <a-pagination
      show-quick-jumper
      :default-current="1"
      :total="totalNum"
      @change="onChange"
    />

    <!-- 退货 -->
    <Return ref="retrunGoods" />
    <!-- 调剂 -->
    <inventory-adjustment ref="inventoryAdjustment" />
  </div>
</template>

<script>
import { thirteenBitTimestamp } from '@/utils/index'
import { storehouseAll } from '@/api/storeroom'
import { originalProductList } from '@/api/materials'
import Return from './components/return-goods'
import InventoryAdjustment from './components/Inventory-adjustment'
import { mapGetters } from 'vuex'

export default {
  components: {
    Return,
    InventoryAdjustment,
  },
  data() {
    return {
      allAlign: 'center',
      ApiData: {
        pageNum: 1,
        pageSize: 10,
        productName: '',
        storeProductId: '',
        type: '0', //0 全部 1 根据原材料名称查询 2根据仓库id查询
      },
      tableData: [],
      totalNum: 0,
      storehouseList: [],
    }
  },
  watch: {
    ApiData: {
      handler(newV, oldV) {
        if (newV.type === '1' && newV.productName === '') {
          this.originalProduct()
          return
        }
      },
      deep: true,
    },
  },
    computed: {
    ...mapGetters({
      role: 'acl/role',
    }),
  },
  created() {
    this.originalProduct()
  },
  methods: {
    onChange(pageNumber) {
      this.ApiData.pageNum = pageNumber
      this.originalProduct()
    },
    /**
     * 查看进货列表
     */
    originalProduct() {
      originalProductList(this.ApiData).then((res) => {
        this.tableData = res.queryResult.list
        this.totalNum = res.queryResult.total
      })
    },
    /**
     * 时间撮传话
     */
    tenBitTimestamp(time) {
      return thirteenBitTimestamp(time)
    },
    /**
     * 根据权限 获取仓库
     */
    storehouse() {
      storehouseAll().then((res) => {
        this.storehouseList = res.queryResult.list
      })
    },
    /**
     * 筛选
     */
    handleChange(e) {
      if (e === '2') {
        //根据仓库查询 根据权限获取到所有得仓库
        this.storehouse()
      }
    },
    /**
     * 仓库选择
     */
    radioChange(e) {
      if (e.target.value === '0') {
        // 全部数据
        this.ApiData = Object.assign({
          pageNum: 1,
          pageSize: 10,
          productName: '',
          storeProductId: '',
          type: '0', //0 全部 1 根据原材料名称查询 2根据仓库id查询
        })
        this.originalProduct()
        return
      }
      this.ApiData.storeProductId = e.target.value
      this.ApiData.productName = null
      this.originalProduct()
    },
    /**
     * 原材料 筛选
     */
    onSearch() {
      this.originalProduct()
    },
    /**
     * 退货
     */
    returnGoods(info) {
      this.$refs.retrunGoods.apiForm = {
        productId: info.product.id,
        productNum: 0,
        refundReason: '',
        storehouseId: info.storehouseId,
        productName: info.product.productName, //原材料名称
        storehouseName: info.storehouse.srName, //仓库名称
      }
      // 最大库存
      this.$refs.retrunGoods.maxNum = info.productNum
      this.$refs.retrunGoods.visible = true
    },
    /***
     * 调剂
     */
    Inventory(info) {
      this.$refs.inventoryAdjustment.apiForm = {
        productId: info.product.id,
        productNum: 0,
        toStorehouseId: null,
        formStorehouseId: info.storehouseId,
        productName: info.product.productName, //原材料名称
        storehouseName: info.storehouse.srName, //仓库名称
      }
      // 最大库存
      this.$refs.inventoryAdjustment.maxNum = info.productNum

      storehouseAll().then((res) => {
        this.$refs.inventoryAdjustment.storehouseList = res.queryResult.list.filter(
          (v) => v.id != info.storehouseId
        )
      })
      this.$refs.inventoryAdjustment.visible = true
    },
  },
}
</script>

<style lang="less" scoped>
</style>